<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="Text 文字" />
    <div class="F2" />
    <kk-text class="T2" val="基于 svg 的单行文本容器，内部使用 vw 单位" />

    <div class="F1" />

    <kk-text class="T1" val="静态文本" />
    <div class="F2" />
    <kk-text class="T2" val="宽度计算只会执行一次，仅适用静态内容" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-text class="FontCherry" val="示例-樱桃" />
        <kk-text class="FontSesame" val="示例-芝麻" />
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Blue Space" val="class" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"FontCherry"</kk-text>
        <kk-text class="Black" val="&gt; 示例-樱桃 &lt;/" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Blue Space" val="class" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"FontSesame"</kk-text>
        <kk-text class="Black" val="&gt; 示例-芝麻 &lt;/" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Orange" val=".FontCherry" />
        <kk-text class="Black Space" val="{" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="fill:" />
        <kk-text class="Black Space" val="rgb(" />
        <kk-text class="Greens" val="245" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="108" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="108" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="margin-right:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <kk-text class="Black" val="}" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Orange" val=".FontSesame" />
        <kk-text class="Black Space" val="{" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="fill:" />
        <kk-text class="Black Space" val="rgb(" />
        <kk-text class="Greens" val="48" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="49" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="51" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <kk-text class="Black" val="}" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="动态文本" />
    <div class="F2" />
    <kk-text class="T2" val="每次内容改变时都会重新计算宽度，此项会强制取代静态内容" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-text class="FontCherry" val="示例-覆盖" />
        <kk-text class="FontSesame" val="示例-芝麻" />
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Blue Space" val="class" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"FontCherry"</kk-text>
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"示例-覆盖"</kk-text>
        <kk-text class="Black" val="&gt; 示例-樱桃 &lt;/" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-text" />
        <kk-text class="Blue Space" val="class" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"FontSesame"</kk-text>
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"示例-芝麻"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Orange" val=".FontCherry" />
        <kk-text class="Black Space" val="{" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="fill:" />
        <kk-text class="Black Space" val="rgb(" />
        <kk-text class="Greens" val="245" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="108" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="108" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="margin-right:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <kk-text class="Black" val="}" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Orange" val=".FontSesame" />
        <kk-text class="Black Space" val="{" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="fill:" />
        <kk-text class="Black Space" val="rgb(" />
        <kk-text class="Greens" val="48" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="49" />
        <kk-text class="Black" val="," />
        <kk-text class="Greens Space" val="51" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="0.7vw" />
        <kk-text class="Black" val=";" />
        <div class="F2" />
        <kk-text class="Black" val="}" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="宽度与字号" />
    <div class="F2" />
    <kk-text class="T2" val="组件宽度通过计算后添加到行内样式中，字号则自动适应高度，请注意样式冲突" />

    <div class="F1" />

    <kk-text class="T1" val="可覆盖样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件默认的样式" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="transition:" />
        <kk-text class="Orange Space" val="fill" />
        <kk-text class="Green Space" val="0.2s" />
        <kk-text class="Black Space" val="cubic-bezier(" />
        <kk-text class="Green" val="0" />
        <kk-text class="Black" val="," />
        <kk-text class="Green Space" val="0" />
        <kk-text class="Black" val="," />
        <kk-text class="Green Space" val="0.5" />
        <kk-text class="Black" val="," />
        <kk-text class="Green Space" val="1" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <kk-text class="Blues" val="fill:" />
        <kk-text class="Black Space" val="rgb(" />
        <kk-text class="Green" val="48" />
        <kk-text class="Black" val="," />
        <kk-text class="Green Space" val="49" />
        <kk-text class="Black" val="," />
        <kk-text class="Green Space" val="51" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Green Space" val="0.7vw" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="行内样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件自带一部分行内样式，请注意样式冲突" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="overflow:" />
        <kk-text class="Orange Space" val="visible" />
        <div class="F2" />
        <kk-text class="Blues" val="box-sizing:" />
        <kk-text class="Orange Space" val="border-box" />
        <div class="F2" />
        <kk-text class="Blues" val="display:" />
        <kk-text class="Orange Space" val="inline-block" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
      </div>
    </div>
  </kk-relative>
</template>

<style scoped>
.FontCherry {
  fill: rgb(245, 108, 108);
  margin-right: 0.7vw;
  height: 0.7vw;
}

.FontSesame {
  fill: rgb(48, 49, 51);
  height: 0.7vw;
}
</style>